<template>
  <view class="w100p pr common_wrap">
    <CommonHeader :title="$t('采购详情')" color="#fff" backgroundColor="rgba(0,0,0,1)" :is-right="false"></CommonHeader>

    <view class="w100p flex-item oh">
      <scroll-view scroll-y class="w100p scroll-Y">
        <view class="w100p swiper_video" :style="{ top: +statusBarHeight + 44 + 'px' }">
          <swiper class="w100p swiper" circular :indicator-dots="true" indicator-color="#9B969A"
            indicator-active-color="#fff" :circular="true">
          
            <swiper-item v-if="!!(purchaseInfo.purchaseInfo && purchaseInfo.purchaseInfo.productVideoUrls)">
              <view class="pr video_wrap">
                <video id="myVideo" class="w100p  palyxxx" :src="get(purchaseInfo, 'purchaseInfo.productVideoUrls')" :show-center-play-btn="true"
                  object-fit="cover" play-btn-position="center" :controls="true" :autoplay="true" muted
                  :poster="currntMainPic">
                </video>
                <view class="video-wrapxx">
                  <image :src="currntMainPic" mode="aspectFill"></image>
                </view>
                <cover-view v-show="isShow" class="pa play_wrap" @click="playsHeader(currentVideo)">
                  <view class="icon_wrap">
                    <u-icon name="play-right-fill" color="#fff" size="46"></u-icon>
                  </view>
                </cover-view>

              </view>
            </swiper-item>
            <swiper-item v-for="(item, index) in get(purchaseInfo, 'purchaseInfo.productImgUrls') ?get(purchaseInfo, 'purchaseInfo.productImgUrls').split(',') : []" :key="index">
              <image class="w100p" :src="getImageUrl(item)" mode="aspectFill" @click="amplifyImg(item)"></image>
            </swiper-item>
          </swiper>
          <cover-view v-show="isShow" class="pa history_wrap">
            <u-notice-bar class="w100p" mode="vertical" :is-circular="false" :volume-icon="false" type="none"
              :list="historyList" font-size="22" duration="5000"></u-notice-bar>
          </cover-view>
        </view>
        <view :style="{ marginTop: getTopR() }"></view>
        <view class="common_content pr w100p">
          <view class="w100p shop_card ">
            <view class="price-wrppx">{{$t('采购')}}</view>
            <view class="w100p flex-column card_wrap">
              <view class="namex">
                {{get(purchaseInfo, `purchaseInfo.${plangJava('productName')}`)}}
              </view>
            </view>
          </view>
          <cover-view class="pa swiper_wrap"></cover-view>
        </view>
        <!-- 采购 -->
        <view class="wrapper-info pr">
          <!-- 基础信息 -->
          <view :class="langR == 'ru'?'r_base-info base-info':'base-info'" @click="goPerson">
            <view class="left-avatar">
              <view class="avatar-w">
                <view class="avatar">
                  <image :src="getImageUrl(purchaseInfo.avatar)" mode="aspectFill"></image>
                </view>
                <view class="country">
					<flag :country="purchaseInfo.country"></flag>
                  <!-- <image src="/static/caigou/ru.png" mode="aspectFill"></image> -->
                </view>
              </view>
              <view class="desc-avatar">
                <view class="name ellipsis_one">{{purchaseInfo[plangJava('username')]}}</view>
				<view class="vip-leval">
				  <view class="circle">
				    <image v-if="purchaseInfo.vipLevel == 0" src="@/static/detail/vip_1.png" mode="scaleToFill" />
				    <image v-if="purchaseInfo.vipLevel == 1" src="@/static/detail/vip_2.png" mode="scaleToFill" />
				    <image v-if="purchaseInfo.vipLevel == 2" src="@/static/detail/vip_3.png" mode="scaleToFill" />
				    <image v-if="purchaseInfo.vipLevel == 3" src="@/static/detail/vip_4.png" mode="scaleToFill" />
				  </view>
				  <text>VIP</text>
				</view>
                <!-- <view v-if="purchaseInfo.vipLevel == 0" class="vip-leval">
                  <view class="circle">
                    <image src="/static/detail/vip_1.png" mode="scaleToFill" />
                  </view>
                  <text>非会员</text>
                </view>
				<view v-else-if="purchaseInfo.vipLevel == 1" class="vip-leval">
					<view class="circle">
					  <image src="/static/detail/vip_1.png" mode="scaleToFill" />
					</view>
					<text>黄金会员</text>
				</view>
				<view v-else-if="purchaseInfo.vipLevel == 2" class="vip-leval">
					<view class="circle">
					  <image src="/static/detail/vip_1.png" mode="scaleToFill" />
					</view>
					<text>铂金会员</text>
				</view>
				<view v-else-if="purchaseInfo.vipLevel == 3" class="vip-leval">
					<view class="circle">
					  <image src="/static/detail/vip_1.png" mode="scaleToFill" />
					</view>
					<text>钻石会员</text>
				</view> -->
              </view>
            </view>
            <!-- 单数 -->
            <view class="right-numwrap">
              <view class="li">
                <view class="txt" :style="langR =='zh'? '':'font-size:24rpx;'">{{$t('发布采购信息')}}</view>
                <view class="num">{{purchaseInfo.totalPurchase}}</view>
              </view>
              <view class="li">
                <view class="txt" :style="langR =='zh'? '':'font-size:24rpx;'">{{$t('成交单数')}}</view>
                <view class="num">{{purchaseInfo.totalDeal}}</view>
              </view>
              <view class="li">
                <view class="txt" :style="langR =='zh'? '':'font-size:24rpx;'">{{$t('成交率')}}</view>
                <view class="num">{{ ((purchaseInfo.dealRate || 0) * 100).toFixed(0) }}%</view>
              </view>
            </view>


          </view>
          <view class="reprot"><block v-if="langR == 'zh'">{{$t('已有')}}</block>{{purchaseInfo.participateCount}}{{$t('人感兴趣并参与报价')}}</view>

          <!-- 采购信息 -->
          <view class="caigou-info">
            <view class="title">
              <view class="name">{{$t('采购信息')}}</view>
              <view class="status">{{get(purchaseInfo, 'purchaseInfo.status')==1? $t('已完成') : $t('进行中')}}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('需求商品')}}</view>
              <view class="txt" style="text-align: right;">{{get(purchaseInfo, `purchaseInfo.${plangJava('productName')}`)}}</view>
            </view>
            <!-- <view class="list">
              <view class="txt">期望品牌</view>
              <view class="txt">{{get(purchaseInfo, 'purchaseInfo.productName')}}</view>
            </view> -->
           <!-- <view class="list">
              <view class="txt">期望单价</view>
              <view class="txt">起重机</view>
            </view> -->
            <view class="list">
              <view class="txt">{{$t('目的地')}}</view>
              <view class="txt" style="text-align: right;">{{get(purchaseInfo, `purchaseInfo.${plangJava('destination')}`)}}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('需求数量')}}</view>
              <view class="txt" v-if="langR == 'zh'">{{get(purchaseInfo, 'purchaseInfo.amount')}}{{get(purchaseInfo, 'purchaseInfo.unit')}}</view>
              <view class="txt" v-if="langR == 'ru'">{{get(purchaseInfo, 'purchaseInfo.amount')}}{{get(purchaseInfo, 'purchaseInfo.unitRu')}}</view>
             
            </view>
           <!-- <view class="list">
              <view class="txt">期望生产日期</view>
              <view class="txt">2025-1-10 至 2025-1-15</view>
            </view> -->
          </view>

          <!-- 商品其他文件 -->
          <view class="file-wrap">
            <view class="w100p big_title">
              {{$t('商品')}}{{$t('其他')}}{{$t('文件')}}
            </view>
            <scroll-view scroll-x class="scrolxxx-wwww">
              <view class="w100p scrolxxx" v-if="(get(purchaseInfo, 'purchaseInfo.productOtherFileUrls') || '').split(',').length > 0">
                <image class="goback_img"v-for="(item, index) in get(purchaseInfo, 'purchaseInfo.productOtherFileUrls') ? get(purchaseInfo, 'purchaseInfo.productOtherFileUrls').split(',') : []"  :src="getImageUrl(item)" mode="aspectFill" @click="amplifyImg(item)"
                  :key="index"></image>
              </view>
            </scroll-view>
          </view>


          <!-- 图片列表  -->
          <!-- <view class="w100p ">
            <view style="height: 16rpx;"></view>
						<view class="w100p shop_introduce">
							<view class="title">{{$t('商品')}}介绍</view>
							<u-parse :html="$t('这个是商品介绍介绍这个是商品介绍介绍这个是商品介绍介绍')"></u-parse>
						</view>
						<view class="w100p shop_introduce">
							<view class="w100p" v-if="product['xq_pics']">
								<view class="full_img oh" v-for="(item, index) in product['xq_pics'].split(',')" :key="index">
									<image class="w100p" :src="item" mode="widthFix" @click="amplifyImg(item)"></image>
								</view>
							</view>
						</view>

					</view> -->

          <!-- 供应商报价 -->
          <view class="supire-report">
            <view class="title-w">
              <view class="txt">{{$t('供应商报价')}}</view>
              <view class="tabs">
                <view :class="{ tab: true, active: index == currentPrice }" v-for="(item, index) in tabList" :key="index" @click="changePrice(index)">
                  {{ item.title }}
                </view>
              </view>
            </view>

            <scroll-view scroll-y class="scroll-view-y">
              <view class="lists-wrapper">
                <view class="" v-for="(item,index) in faQuotationList" :key="index" @click="onGoSuppier(item)"
                :class="langR =='zh'?'list-info':'list-info r_list-info'">
                  <view class="left-avatar">
                    <view class="avatar-w">
                      <view class="avatar">
                        <image :src="getImageUrl(item.avatar)" mode="aspectFill"></image>
                      </view>
                      <view class="country">
						            <flag :country="item.country"></flag>
                        <!-- <image src="/static/caigou/ru.png" mode="aspectFill"></image> -->
                      </view>
                    </view>
                    <view class="desc-avatar">
                      <view class="name" style="max-width: 245rpx;">{{item[plangJava('username')]}}</view>
					  <view class="vip-leval">
					    <view class="circle">
					      <image v-if="item.vipLevel == 0" src="@/static/detail/vip_1.png" mode="scaleToFill" />
					      <image v-if="item.vipLevel == 1" src="@/static/detail/vip_2.png" mode="scaleToFill" />
					      <image v-if="item.vipLevel == 2" src="@/static/detail/vip_3.png" mode="scaleToFill" />
					      <image v-if="item.vipLevel == 3" src="@/static/detail/vip_4.png" mode="scaleToFill" />
					    </view>
					    <text>VIP</text>
					  </view>
                     <!-- <view v-if="item.vipLevel == 0" class="vip-leval">
                       <view class="circle">
                         <image src="/static/detail/vip_1.png" mode="scaleToFill" />
                       </view>
                       <text>{{ $t('非会员') }}</text>
                     </view>
                     <view v-else-if="item.vipLevel == 1" class="vip-leval">
                     	<view class="circle">
                     	  <image src="/static/detail/vip_1.png" mode="scaleToFill" />
                     	</view>
                     	<text>{{ $t('黄金会员') }}</text>
                     </view>
                     <view v-else-if="item.vipLevel == 2" class="vip-leval">
                     	<view class="circle">
                     	  <image src="/static/detail/vip_1.png" mode="scaleToFill" />
                     	</view>
                     	<text>{{ $t('铂金会员') }}</text>
                     </view>
                     <view v-else-if="item.vipLevel == 3" class="vip-leval">
                     	<view class="circle">
                     	  <image src="/static/detail/vip_1.png" mode="scaleToFill" />
                     	</view>
                     	<text>钻石会员</text>
                     </view> -->
                    </view>
                  </view>
                  <view class="right-rpice">
                    {{$t('当前报价')}}<text><text class="pricex">{{item.currency}}</text>{{item.price}}</text><image src="/static/caigou/youce.png"></image>
                  </view>
                </view>
                <!-- vip蒙层 -->
                <view class="model-vip" v-if="!vipPrivilegeGet('查看采购报价',true)">
                  <view class="update">{{$t('升级VIP')}}</view>
                  <view class="see">{{$t('查看更多询单信息')}}</view>
                </view>
                     <!-- 已发布的信心 -->
             <view class="tips">
              {{$t('没有更多了')}}
             </view>
              </view>

            </scroll-view>

       

          </view>

          <view style="height: 16rpx;"></view>

        </view>

      </scroll-view>
    </view>


    <!-- 底部导航栏 -->
    <!-- <view class="footer-nav">
      <view class="footer-wrapper">
        <view class="btn lvse" @click="onParticipate">继续{{$t('发布')}}新采购{{$t('订单')}}</view>
      </view>
    </view> -->


    <!-- 播放视频 -->
    <uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
      <view class="wrapper-video">
        <video id="mainVideo" :src="playVideo" :show-center-play-btn="true" object-fit="cover"
          play-btn-position="center" :controls="true" :autoplay="true" class="video-main">
        </video>
      </view>
    </uni-popup>

    <!-- 图片放大 -->
    <uni-popup ref="popup" class="common_pop" mask-background-color="rgba(0,0,0,1)">
      <view class="w100p">
        <image class="w100p" :src="commonImg" mode="widthFix" @click="closePop"></image>
      </view>
    </uni-popup>

  </view>
</template>

<script>
import {
  mapState
} from 'vuex';
import {
  IMAGE_URL,
} from "@/config/app"

import CommonHeader from "@/pages/components/common-header.vue";
import {faQuotationListQuotation,purchaseInfoGet} from "@/api/caigou.js"

export default {
  data() {
    return {
      statusBarHeight: uni.getStorageSync("statusBarHeight"),
      videos: null, // 播放ref
      playVideo: '',
      commonImg: '',
      currntMainPic: '',
      currentVideo: '',
      isShow: true,
      historyList: [], //浏览记录列表
      list: [],
      product: {},
	  sortKey: 0,
	  currentPrice: 0,
      tabList: [{
        title: this.$t('价格最低'),
      }, {
        title: this.$t('价格最高'),
      }],
	  purchaseInfo:{},
	  faQuotationList:[],
	  IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/'
    }
  },
  components: {
    CommonHeader,
  },
  methods: {
    goPerson() {
      if (this.purchaseInfo.identityType == 0) {
				uni.navigateTo({
					url: `/pages/details/merchantDetail?bid=${this.purchaseInfo.shopId}`,
					webview: 'zWebViewShop'
				})
			} else {
				uni.navigateTo({
					url: `/pages/myPersonPage/index?targetUserId=${this.purchaseInfo.purchaseInfo.publishUserId}`,
					webview: 'zWebView'
				})
			}
    },
	//获取详情
	getPurchaseInfo(id){
		purchaseInfoGet({'purchaseInfoId':id}).then((res)=>{
			if(res.code==0){
				this.purchaseInfo = res.data
        this.currentVideo = res.data.purchaseInfo.productVideoUrls || ''
        if ( this.purchaseInfo.purchaseInfo) {
          this.currntMainPic = this.purchaseInfo.purchaseInfo.productImgUrls.split(',')[0] 
        }
			}
		})
	},
	//获取某个采购寻单中所有报价信息数据列表
	getFaQuotationListQuotation(data){
		faQuotationListQuotation(data).then((res)=>{
			if(res.code==0){
				this.faQuotationList=res.data.records
			}
		})
	},
    // 跳转供应商报价
    onGoSuppier(item) {
      uni.redirectTo({
        url:`/pages/caigou/supplierQuotation/index?id=${this.purchaseInfo.purchaseInfo.id}&quotationUserId=${item.quotationUserId}`,
      })
    },
	changePrice(index) {
		this.currentPrice = index
		this.sortKey = index
		this.getFaQuotationListQuotation({'purchaseInfoId': this.purchaseInfo.purchaseInfo.id,'sortPrice': index,'current':1,'size':999})
	},
    onParticipate() {
      // 跳转发布页面
      uni.navigateTo({
        url: '/pages/caigou/publishInfo/index',
      })
    },
    getTopR() {
      return `calc(${+this.statusBarHeight}px + 44px + 400rpx)`
    },
    // 播放头部视频
    playsHeader(video) {
      // 判断安卓
      const systemInfo = uni.getSystemInfoSync();
      // 判断是否为 Android 系统
      if (systemInfo.platform === 'android') {
        this.playVideo = video;
        this.$refs.popupVideo.open()
        return;
      }
      this.videos.requestFullScreen();
      this.$nextTick(() => {
        this.videos.play();
      })
    },
    // 关闭图片弹窗
    closePop() {
      this.$refs.popup.close();
    },
    // 图片放大
    amplifyImg(imgUrl) {
      if (!imgUrl) return;
      this.commonImg = imgUrl;
      this.$refs.popup.open();
    },
    // 获取数据
    // async getData() {
    //   const { data } = await this.$u.api.shopping.getProduct({
    //     id: 338,
    //   });
    //   this.currntMainPic = data.product.pic;
    //   this.list = [data.product.pic, data.product.pic, data.product.pic];
    //   this.currentVideo = data.product.video;
    //   this.product = data.product;
    // },
    // 浏览记录列表
    // async getHistoryData() {
    //   try {
    //     const {
    //       data
    //     } = await this.$u.api.shopping.getMemberHistory({
    //       id: 338,
    //       type: "shop",
    //     });
    //     this.historyNum = data.member_history_count || 0;
    //     if (!!data.member_history?.length) {
    //       let arr = [];
    //       data.member_history.map((item, index) => {
    //         let str = item[this.plang('username')] + this.$t("正在查看");
    //         arr.push(str)
    //       })
    //       this.historyList = [...arr];
    //     }
    //   } catch (e) {

    //   }
    // },
  },

  onLoad(options) {
    this.videos = uni.createVideoContext('myVideo');
    this.getPurchaseInfo(options.id)
    this.getFaQuotationListQuotation({'purchaseInfoId': options.id,'sortPrice': this.sortKey,'current':1,'size':999})
  },
}
</script>

<style scoped lang="scss">
@import './index.scss';
	@import '@/assets/appScss.scss';
  .r_base-info{
	flex-direction: column;
  align-items: flex-start;
	.right-numwrap{
		margin-top: 20rpx;
		margin-right: 10rpx;
		.li{
			.txt{
				white-space: nowrap !important;
			}
		}
	}
}
.r_list-info{
  flex-direction: column;
  align-items: flex-start !important;
  .desc-avatar{
    .name{
      max-width: 100% !important;
      display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  
  overflow: hidden;
  text-overflow: ellipsis;
    }
  }
  .right-rpice{
    width: 100%;
    justify-content: flex-end;
  }
}
</style>